import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import { Modal } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';


class AreaModal extends BaseComponent {
  static propTypes = {
    selectFunc: PropTypes.func.isRequired,
    provinceList: PropTypes.instanceOf(Immutable.List).isRequired,
  }

  state = {
    show: false,
  }

  show = () => {
    this.setState({ show: true });
  }

  close = () => {
    this.setState({ show: false });
  }

  doSelect = (e, province, city, area) => {
    e.stopPropagation();
    const { selectFunc } = this.props;
    selectFunc(province, city, area);
  }

  render() {
    const { show } = this.state;
    if (!show) {
      return null;
    }

    const { provinceList } = this.props;
    const pCells = provinceList.map((province, index) => {
      return (
        <div className={`p-cell ${province.get('selected') ? 'active' : ''}`} key={index} onClick={e => this.doSelect(e, province)}>
          {province.get('name')}
        </div>
      );
    });

    const selectedProvince = provinceList.find(p => p.get('selected'));
    let cityView;
    let areaView;
    if (selectedProvince) {
      const cCells = selectedProvince.get('children').map((city, index) => {
        return (
          <div className={`c-cell ${city.get('selected') ? 'active' : ''}`} key={index} onClick={e => this.doSelect(e, selectedProvince, city)}>
            {city.get('name')}
          </div>
        );
      });
      cityView = (
        <div className="c-list">{cCells}</div>
      );

      const selectedCity = selectedProvince.get('children').find(c => c.get('selected'));
      if (selectedCity) {
        const aCells = selectedCity.get('children').map((area, index) => {
          return (
            <div className={`a-cell ${area.get('selected') ? 'active' : ''}`} key={index} onClick={e => this.doSelect(e, selectedProvince, selectedCity, area)}>
              {area.get('name')}
            </div>
          );
        });
        areaView = (
          <div className="a-list">{aCells}</div>
        );
      }
    }
    return (
      <Modal className="station-area-modal" touchFunc={this.close}>
        <div className="content">
          <div className="p-list">
            {pCells}
          </div>
          {cityView}
          {areaView}
        </div>
      </Modal>
    );
  }
}

export default AreaModal;

